<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.tree-container{max-width: 100%;max-height: 100%}
	.tree .tree-item{max-width: 100%;padding-right: 19px}
	.role-edit, .role-delete, .role-add-sub{float: right;margin-left: 15px}
	.tree .tree-branch .icon-caret ~ .tree-branch-header{width: calc(100% - 31px)}
	.tree .tree-branch.tree-selected > .tree-branch-header {
		background: #FFF;
	}
	/* #new-role{margin-bottom: 10px} */
</style>

<div class="page-header">
	<h1>
		角色管理
		<!-- 教师权限不可添加 -->
		<?php if($rmxUser['user_type'] != USER_TYPE_TEACHER): ?>
			<a class="btn btn-info a-custom" id="new-role">
				<i class="ace-icon fa fa-plus"></i> 添加角色
			</a>
		<?php endif ?>
	</h1>
</div>
<div class="col-xs-12 col-sm-5">
	<div class="search-area well well-sm">
		<h4 class="blue smaller">
			<i class="fa fa-tags"></i> 角色管理
		</h4>

		<div class="tree-container">
			<ul id="role-tree"></ul>
		</div>
	</div>
</div>

<div class="col-xs-12 col-sm-7 hidden" id="role-form-div">
	<div class="search-area well well-sm">
		<h4 class="blue smaller">
			<i class="fa fa-tags"></i> 角色编辑
		</h4>
		<form class="form-horizontal" role="form" id="role-form">
			<input type="hidden" name="id" value="" />
			<input type="hidden" name="role_parent_id" value="" />
			<input type="hidden" name="role_menu" value="" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">上级角色：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" disabled ="" id="parent_role" value="顶级角色" /> </div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">角色名称：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="role_name" placeholder="请填写角色名称"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">功能权限：</label>
				<div class="col-sm-6">
					<ul id="menu-tree"></ul>
				</div>
			</div>
			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn btn-info" type="submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		// 表单
		var roleForm = $("#role-form");
		var roleSubmitUrl = "<?=admin_url("staff/role_submit_action")?>";

		// 新增角色
		$("#new-role").click(function(){
			roleForm[0].reset();
			roleForm.find("[name=id],[name=role_parent_id], [name=role_menu]").val(0);
			roleForm.find("#parent_role").val('顶级角色');
			// 显示编辑框
			$("#role-form-div").removeClass("hidden");
			get_role_menu(0);
		})

		// 修改角色
		$("body").on("click", ".role-edit", function(){
			var item = $(this).closest("li");
			var itemId = item.attr("id");

			// 获取菜单
			var getUrl = "<?=admin_url('staff/get_role_info')?>";
			var getData = {"id": itemId};
			ajax_get(getUrl, getData, function(res){
				var role = res.data;
				// console.log(role);
				roleForm[0].reset();
				roleForm.find("[name=id]").val(itemId);
				roleForm.find("[name=role_parent_id]").val(role.role_parent_id);
				roleForm.find("[name=role_menu]").val(role.role_menu);
				roleForm.find("[name=role_name]").val(role.role_name);
				roleForm.find("#parent_role").val(role.parentName);
				// 显示编辑框
				$("#role-form-div").removeClass("hidden");
				get_role_menu(role.role_parent_id, role.role_menu);
			})
		})

		// 新增下级角色
		$("body").on("click", ".role-add-sub", function(){
			var item = $(this).closest("li");
			var itemId = item.attr("id");

			roleForm[0].reset();
			roleForm.find("[name=id], [name=role_menu], [name=role_name]").val('');
			roleForm.find("[name=role_parent_id]").val(itemId);

			roleForm.find("#parent_role").val($(this).parent().find("span").text());
			// 显示编辑框
			$("#role-form-div").removeClass("hidden");
			get_role_menu(itemId);
		})

		// 提交表单
		form_submit(roleForm, roleSubmitUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) window.location.reload();
			});
		})

		// 初始化角色树状图
		var roleTree = function(options, callback){
			var $data = null
			if(!("text" in options) && !("type" in options)){
				$data = <?=$roleDatasource?>;//the root tree
				callback({ data: $data });
				return;
			} else if("type" in options && options.type == "folder") {
				if("additionalParameters" in options && "children" in options.additionalParameters)
					$data = options.additionalParameters.children || {};
				else $data = {}//no data
			}
			callback({ data: $data })
		}
		$("#role-tree").ace_tree({
			dataSource: roleTree,
			'itemSelect' : false,
			'folderSelect': true,
		}).tree("discloseAll");

		// 删除角色
		$("body").on("click", ".role-delete", function(e){
			var id = $(this).closest("li").attr("id");
			layer.confirm('确定删除该角色吗？', function(){
				// 提交数据
				var postUrl = "<?=admin_url('staff/role_delete_action')?>";
				var postData = {"id": id};
				ajax_post(postUrl, postData, function(res){
					window.location.reload();
				})
			});
		})
	})

	// 获取权限菜单
	function get_role_menu(roleId, selectValue){
		$("#menu-tree").parent().html('<div id="menu-tree"></div>');

		var ajaxUrl = "<?=admin_url('staff/get_role_menu')?>/" + roleId;
		ajax_get(ajaxUrl, {}, function(res) {
			// 权限菜单
			var treeSource = function(options, callback){
				var $data = null
				if(!("text" in options) && !("type" in options)){
					$data = res.data;//the root tree
					callback({ data: $data });
					return;
				} else if("type" in options && options.type == "folder") {
					if("additionalParameters" in options && "children" in options.additionalParameters)
						$data = options.additionalParameters.children || {};
					else $data = {}//no data
				}
				callback({ data: $data })
			}

			// 如果没有初始化，就重新初始化
			$("#menu-tree").ace_tree({
				dataSource: treeSource,
				'multiSelect': true,
				'itemSelect' : true,
				'folderSelect': false,
			}).tree("discloseAll");

			// 设置选中值
			if(typeof selectValue != 'undefined' && selectValue) {

				var treeArray = selectValue.split(",");
				for(var i in treeArray) {
					var treeId = treeArray[i];
					var treeItem = $("#menu-tree #" + treeId);
					if(treeItem.length) $("#menu-tree").tree('selectItem', treeItem);
				}
			}

			// 权限菜单选择，取消选择事件
			$('#menu-tree').on('selected.fu.tree', function (event, data) {
				set_selected_menu_value(data);
			})
			$('#menu-tree').on('deselected.fu.tree', function (event, data) {
				set_selected_menu_value(data);
			})
		})
	}

	// 获取选中的权限菜单
	function set_selected_menu_value(result){
		var selected = result.selected;
		var result = new Array();

		for(var i in selected) {
			var item = selected[i];

			result.push(item.attr.id);
			result.push(item.attr.pid);
		}
		result = $.unique(result.sort());
		$("#role-form").find("[name=role_menu]").val(result.join(","));
	}
</script>